<template>
  <view class="hb-gap-1 hb-flex hb-flex-col">
    <view
      v-for="(reply, index) in replies"
      :key="index"
      style="width: fit-content"
      class="hb-max-w-full hb-box-shadow-base hb-mb-2 hb-inline-flex hb-items-center hb-overflow-hidden hb-whitespace-pre-line hb-rounded-[48rpx] hb-bg-[#FFF] hb-px-3 hb-py-2 hb-text-black hb-text-xs hb-leading-4"
      @click="handleMessageSend(reply)"
    >
      <text class="hb-whitespace-pre-line">{{ reply }}</text>
      <tm-icon name="ali-icon icon-you1" :font-size="24" />
    </view>
  </view>
</template>

<script lang="ts" setup>

  const props = defineProps<{
    replies?: string[];
  }>();
  const emit = defineEmits<{
    (e: 'send', reply: string): void;
  }>();
  const handleMessageSend = (reply: string) => {
    emit('send', reply);
  };
</script>
